<template>
    <div>
        <van-nav-bar title="商品搜索" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-search v-model="value" placeholder="请输入搜索关键词" />
        <div v-show="!hisdata">
            <div v-for="item in qsearch">
            <router-link :to="{name:'detail',params:{goods_id:item.goods_id}}"></router-link>
            <van-cell-group>
                     <van-cell :title="item.goods_name"  />
            </van-cell-group>

        </div>

        </div>
        
        <div class="hat" v-show="hisdata">
            <h4>搜索历史</h4>
            <van-tag type="primary" size="large">钓鱼竿</van-tag>
            <van-tag type="primary" size="large">自行车</van-tag>
            <van-tag type="primary" size="large">手杖</van-tag>
        </div>
        <div class="hot" v-show="hisdata">
             <h4>搜索发现</h4>
            <van-tag type="primary" size="large">草莓</van-tag>
            <van-tag type="primary" size="large">智能扫地机</van-tag>
            <van-tag type="primary" size="large">防晒服</van-tag>

        </div>


    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { qsearchApi } from '@/api/api';
import _ from 'lodash'
let hisdata=ref(true)
let value = ref('')
let qsearch = ref([])
watch(value,
    _.debounce((val) => {
        if(val.length==0){
            hisdata.value=true
        }
        else{
            hisdata.val=false
             qsearchApi(val).then(res => {
            console.log('搜索数据', res)
            qsearch.value = res.data.message
        })

        }
       

    }, 1000))


</script>

<style lang="scss" scoped></style>